<template>
  <!-- 侧边栏 -->
  <div class="main_sidebar" style="width:100%;">
      <el-menu
       :collapse="isCollapse"
       :router="true"
       :unique-opened="true"
       :default-active="menuActive"
       @select="handleSelect"
       class="el-menu-vertical-demo"
       @open="handleOpen"
       @close="handleClose"
       background-color="#2b2b2b"
       text-color="rgba(255, 255, 255, 0.65)"
       active-text-color="#0099ff">
       <div class="menu-box" v-for="(item,index) in menuData" :key="index">
         <el-menu-item :index="item.url" v-if="item.items.length===0">
           <div class="sub-menu-box">
             <i :class="item.icon"></i>
             <span slot="title">{{item.name}}</span>
           </div>
         </el-menu-item>
         <el-submenu :index="item.id" v-else>
           <template slot="title" class="sub-menu-box">
             <i :class="item.icon"></i>
             <span>{{item.name}}</span>
           </template>
           <div class="sub-menu-list" v-for="(sub,i) in item.items" :key="i">
             <el-menu-item :index="sub.url" style="background-color: transparent;">{{sub.name}}</el-menu-item>
           </div>
         </el-submenu>
       </div>
       <!-- <el-submenu :index="item.id"  v-for="(item,index) in menuData" :key="index">
         <template slot="title" class="sub-menu-box">
           <i :class="item.icon"></i>
           <span>{{item.name}}</span>
         </template>
         <div class="sub-menu-list" v-for="(sub,i) in item.items" :key="i">
           <el-menu-item :index="sub.url" style="background-color: transparent;">{{sub.name}}</el-menu-item>
         </div>
       </el-submenu> -->
      </el-menu>
   </div>
</template>
<script>
export default {
  data () {
    return {
      isCollapse: false,
      menuActive:"/resourceGroup",
      breadTitle:"",
      menuData:this.menuOptions,
      menuData1:[
        {
          name: "系统管理",
          url: "/home",
          icon: "el-icon-menu",
          breadTitle:"首页",
          id:"01",
          items: [
            {
              name: "集群状态",
              id:"011",
              breadTitle:"系统管理 / 集群状态",
              url: "/clusterStatus"
      			},
            {
              name: "监控统计",
              id:"012",
              breadTitle:"系统管理 / 监控统计",
              url: "/monitorStatistical"
      			}
          ]
        },
        {
          name: "资源管理",
          url: "",
          id:"02",
          icon: "el-icon-star-on",
          items: [
            {
              name: "资源组",
              id:"021",
              breadTitle:"资源管理 / 资源组",
              url: "/resourceGroup"
      			},
            {
              name: "处理单元",
              id:"022",
              breadTitle:"资源管理 / 处理单元",
              url: "/processingUnit"
      			}
          ]
        },
        {
          name: "任务管理",
          url: "",
          id:"03",
          icon: "el-icon-share",
          items: [
            {
              name: "任务详情",
              id:"031",
              breadTitle:"任务管理 / 任务详情",
              url: "/taskDetail"
            },
            {
              name: "任务日志",
              id:"032",
              breadTitle:"任务管理 / 任务日志",
              url: "/taskLog"
            },
            {
              name: "任务提交",
              id:"033",
              breadTitle:"任务管理 / 任务提交",
              url: "/taskSubmit"
            }
          ]
        }
      ]
    }
  },
  props: {
      menuOptions: {
          type: Array
      }
  },
  computed: {
    getBreadTitleState() {
       return this.$store.getters.getBreadTitle;
    },
    getMenuActiveState() {
       return this.$store.getters.getMenuActive;
    }
  },
  watch: {
    menuOptions(options){
      this.menuData=options

      // let menuActive=JSON.parse(sessionStorage.getItem('menuActive'))
      //
      // if(menuActive){this.menuActive=menuActive}

      let menuActive=this.getMenuActiveState
      if(menuActive){this.menuActive=menuActive}
    },
    getBreadTitleState: function(val) {
      // console.log(val,'监听');
    },
    getMenuActiveState: function(val) {
      this.menuActive=val
    },
  },
  methods: {
      handleOpen(key, keyPath) {
       // console.log(key, keyPath);
     },
     handleClose(key, keyPath) {
       // console.log(key, keyPath);
     },
     getUserMenu(){
       // this.$http.get('/static/json/getUserMenu.json', {}).then(res => {
         this.$http.post('/user/getCurrentUser', {}).then(res => {
         if(res.data.code===200){
           sessionStorage.setItem('userInfo',JSON.stringify(res.data.content))

           let menuResultData=res.data.content.userAccess[0].menus

           let menuData=[]

           for (var i = 0; i < menuResultData.length; i++) {
             let item=menuResultData[i]

             if(!item.targetUrl){item.targetUrl=''}
             menuData.push(
               {
                 name: item.title,
                 url: item.targetUrl,
                 icon: item.icon,
                 breadTitle:item.title,
                 id:JSON.stringify(item.id),
                 items: item.children
               }
             )

             if(item.children.length>0){
               let childrenItem=menuData[i].items

               for (var k = 0; k < item.children.length; k++) {
                 let child=item.children[k]

                 childrenItem[k]={
                   name: child.title,
                   url: child.targetUrl,
                   icon: child.icon,
                   breadTitle:item.title+' / '+child.title,
                   id:child.id,
                   items: child.children
                 }
               }
             }else{
               item.breadTitle=item.title
               menuData[i].breadTitle=item.title
             }
           }

           this.menuData=menuData

           this.$router.push({path: '/brokerage'})
         }
       }).catch(error => {
         // console.log("error");
       })
     },
     handleSelect(key, keyPath) {
       // console.log(key, keyPath);
       let  that=this

       if(keyPath.length>1){

         let id=keyPath[0]
         that.menuData.forEach(function (v,i) {

           if(id===v.id){
             v.items.forEach(function(sub,k){
               if(key===sub.url){
                 that.breadTitle=sub.breadTitle
               }
             })
           }
         })
       }else{
         that.menuData.forEach(function (v,i) {
           if(key===v.url){
             that.breadTitle=v.breadTitle
           }
         })
       }

       // 保存面包屑
       this.$store.dispatch("setBreadTitle", that.breadTitle);
       this.$store.dispatch("setMenuActive", key);

       sessionStorage.setItem('breadTitle',JSON.stringify(that.breadTitle));

       sessionStorage.setItem('menuActive',JSON.stringify(key));
     },
  },
  mounted(){
    // let menuActive=JSON.parse(sessionStorage.getItem('menuActive'))
    let menuActive=this.getMenuActiveState
    let breadTitle=JSON.parse(sessionStorage.getItem('breadTitle'))

    // 保存面包屑
    // this.$store.dispatch("setBreadTitle", menuActive);

    if(menuActive){
      this.menuActive=menuActive
    }
  },
  created(){
    // this.getUserMenu()
  }
}
</script>
<style lang="less" >
    .main_sidebar{
      ul>li{
        padding:0 !important;
        text-align:left;
        .el-submenu__title{
          padding:0 0 0 16px !important;
        }
        .sub-menu-box{
          padding:0 0 0 10px !important;
        }
      }
      i{
        color:#d7d7d7;
      }
    }

    .menu-box{
      text-align:left;
    }
    .el-aside .el-menu-item.is-active{
        background-color: #0099FF !important;
        color:#fff !important;
    }
    .el-submenu.is-active .el-submenu__title{
        background-color: #1890ff;
    }
    .el-submenu .el-menu-item{
      padding-left:52px !important;
    }
    .el-submenu .el-menu{
      background-color: rgba(12, 12, 12, 0.5) !important;
    }
    .el-menu-item{
      background-color: transparent !important;
    }
    .el-menu-item:hover{
      outline: 0 !important;
      color: #fff !important;
   }
   .el-menu{
     width: 230px;
     border: none !important;
   }
   .el-menu--collapse .sub-menu-box span,.el-menu--collapse .el-submenu__title span{
     display: none;
   }
   .el-menu--collapse .sub-menu-box .el-submenu__icon-arrow,.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow{
     display: none;
   }
</style>
